<!-- AllNewsPage.vue -->
<template>
  <div class="container py-4">
    <h2 class="mb-4">全部新闻</h2>

    <!-- 全部新闻列表 -->
    <div
      class="news-item"
      v-for="item in newsList"
      :key="item.id"
      @click="$router.push({ name: 'NewsDetail', params: { id: item.id } })"
      style="cursor: pointer"
    >
      <div class="row g-0 mb-4 border-bottom pb-3">
        <!-- 日期部分 -->
        <div class="col-2">
          <div class="date-box text-center date-bg text-white p-3 rounded">
            <div class="year-month">{{ item.date.yearMonth }}</div>
            <div class="day fs-1 fw-bold">{{ item.date.day }}</div>
          </div>
        </div>

        <!-- 内容部分 -->
        <div class="col-10 ps-3">
          <div class="news-content">
            <h5 class="news-title clamp-text">{{ item.title }}</h5>
            <p class="summary clamp-text" v-if="item.summary">
              {{ item.summary }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
// 模拟数据
const newsList = ref([
  {
    id: 1,
    date: { yearMonth: "2023-10", day: "05" },
    title: "全球气候峰会达成历史性协议",
    summary: "各国代表在联合国气候峰会上就减排目标达成一致...",
  },
]);
</script>
<style scoped>
</style>